{% extends "StartGroup/groupHome.html" %}

{% block content %}

    <script src="/{{ media_url }}contifyuser/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">	
	 $(document).ready(function(){$("#submit_comment").click(function(e){
	    var comment_form = $("#comment_form")
	    jQuery.ajax({
	      url: comment_form.attr('action'),
	      type: comment_form.attr('method'),
	      data: comment_form.serialize(),
	      dataType: 'json',
	      success: function(json){
		$("#recentComment").show();
		$('#recPostDate').html(json.rpd);
		$("#recCommentTxt").html(json.rc.comment[0]);
	    },
	      error: function(xhr, ajaxOptions, thrownError){
		alert("An Error Has Occurred. Please try again.");
	      }
	    });
	  });
	  });
	 
	$(document).ready(function(){$("button.delButton").click(function(){
	    var commid = $(this).attr('commid');
	    var eveid = $(this).attr('eveid');
	    jQuery.ajax({
	      url: '/connectpeople/groupevents/' + eveid + '/',
	      type: 'POST',
	      data: {'commid':commid},
	      dataType: 'json',
	      success: function(json){
		document.getElementById(commid).style.display="none";
	    },
	      error: function(xhr, ajaxOptions, thrownError){
		alert("An Error Has Occurred. Please try again.");
	      }
	    });
	});
	});
	
	$(document).ready(function(){$("input.rsvpImage").click(function(){
	    var rsvp = $(this).attr('rsvp');
	    var eveid = $(this).attr('eveid');
	    jQuery.ajax({
	      url: '/connectpeople/groupevents/' + eveid + '/',
	      type: 'POST',
	      data: {'rsvp':rsvp},
	      dataType: 'json',
	      success: function(json){
		alert("success");
	    },
	      error: function(xhr, ajaxOptions, thrownError){
		alert("An Error Has Occurred. Please try again.");
	      }
	    });
	});
	});
    </script>

{% load tags %}
    <div>
    {{ event.event_name }}
    </div>
    <div>
    {{ event.event_place }}
    </div>
    <div>
    {{ event.event_date }}
    </div>
    <div>
    {{ event.event_desc }}
    </div>
    <div>
	  Rsvp:
	  {% if event.event_date  >= curr_date %}
	       {%if rsvp_row = None%}
		    <input eveid="{{event.id}}" class="rsvpImage" type="image" rsvp="1" src="/{{ media_url }}images/yes-icon.png"/>
		    <input eveid="{{event.id}}" class="rsvpImage" type="image" rsvp="0" src="/{{ media_url }}images/no-icon.jpg"/>	       
	       {% else %}
		    {% if rsvp_row.rsvp_val = 1 %}
			 You resvped yes. change? 
			 <input eveid="{{event.id}}" class="rsvpImage" type="image" rsvp="0" src="/{{ media_url }}images/no-icon.jpg"/>
		    {% else %}
			 You rsvped no. change? 
			 <input eveid="{{event.id}}" class="rsvpImage" type="image" rsvp="1" src="/{{ media_url }}images/yes-icon.png"/>
		    {% endif %}
	       {% endif %}
	  {% else %}
	       {% if rsvp_row != None and rsvp_row.rsvp_val = 1 %}
		    You Attended the event
	       {% else %}
		    You did not attend
	       {% endif %}
	  {% endif %}
    </div>
    
    <div class="topPagination">
	    <div class="clearbreak noRightBreak">
		{% if pages.has_previous %}
		    <a href="?page={{ pages.previous_page_number }}">previous</a>
		{% endif %}
	
		<span>
		    Page {{ pages.number }} of {{ pages.paginator.num_pages }}
		</span>
	
		{% if pages.has_next %}
		    <a href="?page={{ pages.next_page_number }}">next</a>
		{% endif %}
	    </div>
	</div>
	<div class="allCommentsSection">    
	    {% if pages.object_list %}			
		    {% for comment in pages.object_list %}
			<div id = "{{comment.id}}" class="singleCommentSection">
			    <div class="nobreak singleCommentImg">
				{{ comment.photo|thumbnail }}
			    </div>
			    <div class="nobreak singleCommentTextArea">				
				<div class="singleCommentLeftTextArea">
				    <div><strong>{{comment.post_by}}</strong></div>
				    <div>{{comment.comment}}</div>
				</div>
				<div class="singleCommentRightTextArea">
				   <div> {{comment.post_date}} </div>
				   <div><button id='delete' class="delButton" eveid="{{event.id}}" commid='{{comment.id}}' type='button'>Delete</button></div>
				</div>
			    </div>
			</div>
		    {% endfor %}
		{% else %}
		    <div class="nobreak">No Comments Listed</div>
	    {% endif %}
	</div>
	<div id="commentDivId" class="allCommentsSection">    
	    
	</div>
	<div class="noRightBreak">
	    {% if pages.has_previous %}
		<a href="?page={{ pages.previous_page_number }}">previous</a>
	    {% endif %}
    
	    <span>
		Page {{ pages.number }} of {{ pages.paginator.num_pages }}
	    </span>
    
	    {% if pages.has_next %}
		<a href="?page={{ pages.next_page_number }}">next</a>
	    {% endif %}
	</div>
	<div id="recentComment" class="nobreak recCommentSection" style="display:none;">
	    <div class="singleCommentSection">
		<div class="nobreak singleCommentImg">
		    {{ curr_member.photo|thumbnail }}
		</div>
		<div class="nobreak singleCommentTextArea">				
		    <div class="singleCommentLeftTextArea">
			<div><strong>RECENT COMMENT:</strong></div>
			<div><strong>{{curr_member.first_name}}</strong></div>
			<div id="recCommentTxt"></div>
		    </div>
		    <div id="recPostDate" class="singleCommentRightTextArea"></div>
		</div>
	    </div>
	</div>
	  <div id="newCommentForm" class="nobreak commentFormSection">
	    <div class="singleCommentSection">
		<form id="comment_form" method="POST" action="/connectpeople/groupevents/{{ event.id }}/">
		<div class="nobreak commentFormFieldLine">
		    <div class="nobreak commentFormLabel"><span class="startStandardRed">* </span><span><strong>{{ post_event_comment_form.comment.label_tag }}</strong></span></div>
		    <div class="nobreak startFormField">{{ post_event_comment_form.comment }}</div>
		    <p>{{ post_event_comment_form.errors.comment }}</p>
		</div>
		<div class="nobreak commentFormPostButton">
		    <input id="submit_comment" type="button" value="Comment" name='createEvent'/>
		</div>
		</form>
	    </div>
	  </div>
    
{% endblock %}
